<template>
    <div>
    <el-form :inline="true" :model="categoryName" class="demo-form-inline">
    <el-form-item label="分类名称">
      <el-input v-model="categoryName" placeholder="分类名称" clearable />
      <el-button type="primary" @click="getPage">搜索</el-button>
      <el-button @click="add">添加分类</el-button>
    </el-form-item>
  </el-form>
  <br/>
  <el-table :data="categoryList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column prop="categoryName" label="分类名称"  />
      <el-table-column  label="操作" >
        <template #default="scope">

            <el-button
            size="small"
            type="primary" 
            @click="edit(scope.row)"
          >
          修改
          </el-button>
          <el-button
            size="small"
            type="danger" 
            @click="Delete(scope.row)"
          >
          删除
          </el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-divider />
    <br/>

    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[2, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>


    <el-dialog v-model="dialogFormVisible" :title="dTitle" width="500">
    <el-form :model="category">
      <el-form-item label="categoryName" >
        <el-input v-model="category.categoryName" autocomplete="off" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="onSubmit">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

import { reactive, ref } from 'vue'
import ApiFoodCategory from '../../api/Food/FoodCategory.js'
import { ElMessage ,ElMessageBox} from 'element-plus';
import { onBeforeMount } from 'vue';
const categoryName = ref('');
const categoryList = ref([]);
const category=reactive({});
const currentPage = ref(1);
const pageSize = ref(2);
const total = ref(0);
const dialogFormVisible = ref(false);
const dTitle = ref('');
const business=JSON.parse(sessionStorage.getItem('businessData'));

const add = () => {
  category.categoryName = '';
  category.shopId=business.id;
  dTitle.value = '添加菜品分类';
  dialogFormVisible.value = true;
  
};
const edit = (row) => {
    category.categoryName = row.categoryName;
    category.shopId=business.id;
    category.categoryId=row.categoryId;
    console.log(category);
  dTitle.value = '修改菜品分类';
  dialogFormVisible.value = true;
};
const handleSizeChange = (val) => {
  console.log(val);
  pageSize.value = val;
  getPage(); 
};
const handleCurrentChange = (val) => {
  console.log(val);
  currentPage.value = val;
  getPage(); 
};

const getPage = () => {
  console.log(currentPage.value);
  const data = {
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    categoryName: categoryName.value,
    shopId:business.id
  };
    ApiFoodCategory.pageSelectFoodCategory(data)
    .then(response => {
      if (response.code === 200) {
        console.log(response.data);
        console.log(response.data.list);
        categoryList.value = response.data.list;
        total.value = response.data.totalCount;
        console.log(categoryList.value);
        console.log(total.value);
      } else {
        console.error('Failed to fetch data:', response.message);
      }
    })
    .catch(error => {
      console.error('Error fetching data:', error);
    });
};
const onSubmit = () => {
  console.log(category);
  console.log(dTitle.value);
  category.shopId=business.id;
  if(dTitle.value=='添加菜品分类'){
  ApiFoodCategory.saveCategory(category).then(response => {
      if (response.code === 200) {
        dialogFormVisible.value = false;
        ElMessage({
          message: '添加成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      }else{
        ElMessage({
         message: '添加出错',
          type: 'error',
        plain: true,
        })
      }
    })
  }else{

    ApiFoodCategory.updateCategory(category).then(response => {
      if (response.code === 200) {
        dialogFormVisible.value = false;
        ElMessage({
          message: '修改成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      }else{
        ElMessage({
          message: '修改出错',
          type: 'error',
        plain: true,
        })
      }
    })
  }

};
const Delete = (row)=>{
  
  ElMessageBox.confirm(
    '确定要删除菜品分类吗',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',     
      type: 'warning',
    }
  ).then(() => {
    ApiFoodCategory.deleteCategory(row.categoryId).then(response => {
      if (response.code === 200) {
        ElMessage({
          message: '删除成功.',
           type: 'success',
          plain: true,
          })
          getPage();
      }else{
        ElMessage({
          message: '删除出错',
        })
      }
   })
  }).catch(() => {
    ElMessage({
      message: '取消删除',
      type: 'info',
      plain: true,
    })
  });
   
}
onBeforeMount(() => {
  getPage();
});



</script>

<style lang="scss" scoped>

</style>